<template>
  <NModal :show="state.dialogFormVisible" @onUpdateShow="close">
    <div ref="modalRef" class="edit-dia" style="width: 800px">
      <MacHeader
        title="选择标签"
        :is-fullscreen="isFullscreen"
        :show-desc="false"
        @toggle="toggle"
        @close="close"
      />
      <div class="content">
        <div class="search" v-if="tableInfo.showSearch">
          <NForm
            inline
            :model="tableInfo.queryForm"
            label-width="auto"
            label-placement="left"
          >
            <NFormItem label="标签">
              <NInput
                v-model:value="tableInfo.queryForm.name"
                placeholder="请输入标签"
                clearable
                style="width: 200px"
              />
            </NFormItem>
            <NFormItem>
              <NButton type="primary" @click="queryData">
                <template #icon>
                  <n-icon>
                    <i class="esayIcon esayIcon-sousuo"></i>
                  </n-icon>
                </template>
                <span>搜索</span>
              </NButton>
            </NFormItem>
          </NForm>
        </div>
        <div class="pb20 flex flex-between">
          <div>
            <NButton type="primary" @click="handAdd()">
              <i class="esayIcon esayIcon-tianjiawenjianjia"></i>
              <span class="pl8">添加</span>
            </NButton>
            <NButton class="ml10" type="error" @click="handDel()">
              <i class="esayIcon esayIcon-shanchu"></i>
              <span class="pl8">批量删除</span>
            </NButton>
            <NButton class="ml10" type="primary" @click="handOver()">
              <span class="pl8">选择完成({{ multipleSelection.length }})</span>
            </NButton>
          </div>
          <div>
            <n-button
              tertiary
              circle
              @click="tableInfo.showSearch = !tableInfo.showSearch"
            >
              <template #icon>
                <i class="esayIcon esayIcon-sousuo"></i>
              </template>
            </n-button>
          </div>
        </div>
        <NDataTable
          v-model:checked-row-keys="tableInfo.checkedRowKeys"
          style="flex: 1"
          flex-height
          :columns="columns"
          :loading="tableInfo.listLoading"
          :data="tableInfo.tableData"
          @update:checked-row-keys="selectionChangHandle"
        />
        <div class="pagination mt20">
          <NPagination
            v-model:page="tableInfo.queryForm.pageNo"
            :page-count="tableInfo.total"
            :page-sizes="tableInfo.pageSizes"
            show-quick-jumper
            show-size-picker
            @updatePage="pageChange"
            @updatePageSize="sizeChange"
          />
        </div>
      </div>
    </div>
  </NModal>
  <Edit ref="addRef" @success="queryData" />
  <DelConfirm ref="delRef" @confirm="delConfirm" />
</template>
<script setup lang="ts">
import { reactive, ref, h, toRaw } from 'vue'
import { useFullscreen } from '@vueuse/core'
import {
  NModal,
  NInput,
  NDataTable,
  NPagination,
  NButton,
  NForm,
  NFormItem,
  NIcon
} from 'naive-ui'
import type { DataTableColumns } from 'naive-ui'
import MacHeader from '@/components/codeBlock/MacHeader'
import { useApi } from '@/hooks/useApi'
import tagApi from '@/service/api/photo/tag'
import Edit from '@/views/photo/tag/components/Edit.vue'
import DelConfirm from '@/components/nComponents/DelConfirm'
/**
 *  弹框
 * */
const modalRef = ref()
const { isFullscreen, toggle } = useFullscreen(modalRef)
const state = reactive({
  dialogFormVisible: false
})
const open = (arr: any = []) => {
  multipleSelection.value = arr
  tableInfo.queryForm.name = ''
  queryData()
  state.dialogFormVisible = true
}
const close = () => {
  state.dialogFormVisible = false
}
defineExpose({
  open
})

/**
 *  列表
 * */
const addRef = ref()
const delRef = ref()
const {
  pageChange,
  sizeChange,
  handAdd,
  handDel,
  delConfirm,
  tableInfo,
  queryData
} = useApi({
  addRef,
  delRef,
  initForm: {
    name: ''
  },
  isRequest: false,
  getData: async (params: any) => {
    const res = await tagApi.list(params)
    res.data.data.map((el: any) => {
      el.key = el.id
      return el
    })
    return res
  },
  fetchOver: () => {
    tableInfo.checkedRowKeys = multipleSelection.value
      .filter((el: any) =>
        tableInfo.tableData.some((item: any) => item.id === el.id)
      )
      .map((el: any) => {
        return el.id
      })
  },
  delData: tagApi.dels
})
const columns: DataTableColumns<any> = [
  {
    type: 'selection',
    options: ['all', 'none'],
    disabled(row) {
      return row.name === 'Edward King 3'
    }
  },
  {
    title: '标签名称',
    key: 'name'
  },
  {
    title: '权重',
    key: 'sort'
  },
  {
    title: '操作',
    key: 'total',
    align: 'center',
    width: 300,
    render(row: any) {
      return h('div', [
        h(
          NButton,
          {
            size: 'small',
            type: 'warning',
            class: 'ml10',
            onClick: () => handAdd(row)
          },
          { default: () => '编辑' }
        ),
        h(
          NButton,
          {
            size: 'small',
            class: 'ml10',
            type: 'error',
            onClick: () => handDel(row)
          },
          { default: () => '删除' }
        )
      ])
    }
  }
]
const multipleSelection: any = ref([])
const selectionChangHandle = (keys: any, rows: any[]) => {
  multipleSelection.value = [
    ...multipleSelection.value.filter((el: any) => {
      return tableInfo.tableData?.every((item: any) => item.id !== el.id)
    }),
    ...rows
  ]
}
const emit = defineEmits(['change'])
const handOver = () => {
  emit(
    'change',
    toRaw(multipleSelection.value).map((el: any) => {
      return el.name
    })
  )
  close()
}
</script>

<style scoped lang="scss">
.content {
  height: 55vh;
  display: flex;
  flex-direction: column;
}
</style>
